<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul"></ul>
    <script>
        /**
         * 使用本节提供的属性替换子节点的内存与性能问题: 
         *     1、节点被清除了但是绑定的事件与js对象等还在，最好手动删除
         *     2、innerHTML插入大量节点的时候性能优越相比使用操作DOM节点
         *     3、最好限制使用innerHTML
        */

        // 限制使用innerHTML
        const ul = document.getElementById('ul')
        const data = [
            {
                name: 'xiaomi',
                price: 1999
            },
            {
                name: 'apple',
                price: 8999
            }
        ]

        for (let list of data) { 
            // 读取一次, 设置一次, 这样做不好
            ul.innerHTML += `<li>${list.name + ' ' + list.price}</li>`
        }

        let itemsHTML = ''
        for (let list of data) {
            // 先把字符串拼接好
            itemsHTML += `<li>${list.name + ' ' + list.price}</li>`
        }
        // 再把字符串一次插入
        ul.innerHTML = itemsHTML

        // 也可以这样
        ul.innerHTML = data.map((item) => `<li>${item.name + ' ' + item.price}</li>` ).join('')

        

    </script>
</body>
</html>